import CssEditor from "./src/CssEditor.vue"
import CssInput from "./src/CssInput.vue"
import CssItem from "./src/CssItem.vue"
import CssTemplate from "./src/CssTemplate.vue"

export { CssEditor, CssInput, CssItem, CssTemplate }

export const options = [
  {
    value: 'display',
    label: '显示',
    options: [
      {
        value: 'grid',
        label: '网格'
      },
      {
        value: 'flex',
        label: '弹性'
      }
    ]
  },
  {
    value: 'color',
    label: '字体颜色'
  },
  {
    value: 'font-size',
    label: '文本尺寸'
  },
  {
    value: 'background-color',
    label: '背景颜色'
  },
  {
    value: 'grid-area',
    label: '网格区域'
  }
]

export const templates = {
  sudoku: {
    label: '九宫格',
    comment: '这是网格布局里的九宫格模板',
    value: {
      'display': 'grid',
      'grid-template-columns': 'repeat(3, minmax(0, 1fr))',
      'grid-template-rows': 'repeat(3, minmax(0, 1fr))',
      'grid-template-areas': "'one two three' 'four five six' 'seven eight nine'",
      'gap': '10px'
    }
  }
}